@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .button-outline {
        @apply p-1.5 overflow-hidden text-black transition duration-150 ease-in-out bg-transparent border-2 rounded-none border-chestnut-600;
        @apply hover:bg-chestnut-600 hover:text-athens-gray-50;
        @apply active:bg-white3-50 active:border-chestnut-600 active:text-black active:rounded-none;
    }

    .button-solid {
        @apply p-1.5 transition duration-150 ease-in-out border-2 border-transparent rounded-none text-athens-gray-50 bg-chestnut-600;
        @apply hover:bg-chestnut-700 active:bg-transparent;
        @apply active:border-chestnut-600 active:text-black;
    }

    .blinking-cursor {
        @apply inline-block w-3 h-3 bg-chestnut-600;
        @apply animate-blink;
    }

    .scrollbar-red {
        @apply scrollbar-track-white3-0 scrollbar-thumb-chestnut-600 scrollbar scrollbar-w-1;
        @apply hover:scrollbar-thumb-chestnut-700;
        @apply active:scrollbar-thumb-chestnut-600;
    }

    .scrollbar-base {
        @apply scrollbar-track-custom-titlebar scrollbar-thumb-custom-text scrollbar scrollbar-w-0.5 scrollbar-h-0.5;
        @apply hover:scrollbar-thumb-custom-text-light;
        @apply active:scrollbar-thumb-custom-text;
    }

    .markdown-content h2 {
        font-size: 1em;
        font-weight: bold;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .markdown-content ul {
        list-style-type: disc;
        padding-left: 2em;
        margin-bottom: 1em;
    }

    .markdown-content li {
        margin-bottom: 0.5em;
    }

    .markdown-content p {
        margin-bottom: 1em;
    }

    .markdown-content a {
        color: #F4F5F7;
        text-decoration: none;
    }

    .markdown-content a:hover {
        text-decoration: underline;
    }
}

@layer utilities {
    .shine-effect {
        position: relative;
        overflow: hidden;
    }

    .shine-effect::before,
    .shine-effect::after {
        content: '';
        position: absolute;
        top: -40%;
        right: -40%;
        width: 150%;
        height: 150%;
        transition: all 0.4s ease-out;
        transform: translate(40%, -40%) rotate(-45deg);
    }

    .shine-effect::before {
        background: linear-gradient(225deg,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(255, 255, 255, 0.2) 30%,
                rgba(255, 255, 255, 0.1) 40%,
                rgba(255, 255, 255, 0) 60%);
        opacity: 0.9;
        filter: blur(5px);
    }

    .shine-effect::after {
        background: linear-gradient(225deg,
                transparent 0%,
                rgba(255, 255, 255, 0.15) 69.9%,
                rgba(255, 255, 255, 0.15) 90%,
                rgba(255, 255, 255, 0.05) 100%,
                transparent 100%);
        opacity: 0.7;
        filter: blur(3px);
    }

    .shine-effect:hover::before,
    .shine-effect:hover::after {
        transform: translate(30%, -30%) rotate(-45deg) scale(1.2);
    }

    .shine-effect:hover::before {
        opacity: 1;
    }

    .shine-effect:hover::after {
        opacity: 1;
        filter: blur(3px);
    }


    .shine-effect-large {
        position: relative;
        overflow: hidden;
    }

    .shine-effect-large::before,
    .shine-effect-large::after {
        content: '';
        position: absolute;
        top: -230%;
        /* 将初始位置调整到元素上方 */
        right: -40%;
        /* 调整左侧位置以覆盖整个元素 */
        width: 250%;
        height: 130%;
        transition: all 0.4s ease-out;
        transform: translateY(30%) rotate(30deg);
        /* 初始位置在元素上方 */
    }

    .shine-effect-large::before {
        background: linear-gradient(225deg,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(255, 255, 255, 0.2) 30%,
                rgba(255, 255, 255, 0.1) 40%,
                rgba(255, 255, 255, 0) 60%);
        opacity: 0.9;
        filter: blur(5px);
    }

    .shine-effect-large::after {
        background: linear-gradient(225deg,
                transparent 0%,
                rgba(255, 255, 255, 0.35) 69.9%,
                rgba(255, 255, 255, 0.5) 90%,
                rgba(255, 255, 255, 0.54) 100%,
                transparent 100%);
        opacity: 0.3;
        filter: blur(3px);
    }

    .shine-effect-large:hover::before,
    .shine-effect-large:hover::after {
        transform: translateY(50%) rotate(30deg) scale(1.2);
        /* 向下移动 */
    }

    .shine-effect-large:hover::before {
        opacity: 0.9;
    }

    .shine-effect-large:hover::after {
        opacity: 0.9;
        filter: blur(3px);
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

    }

    .animate-blink {
        animation: blink 0.75s infinite steps(1, end);
    }

    .title-bar {
        -webkit-user-select: none;
        -webkit-app-region: drag;
    }

    .no-drag {
        -webkit-app-region: no-drag;
    }

    @keyframes shine {
        0% {
            transform: translateX(100%) translateY(-100%);
        }

        50% {
            transform: translateX(25%) translateY(25%);
        }

        100% {
            transform: translateX(-50%) translateY(50%);
        }
    }

    .animate-shine {
        animation: shine 0.5s ease-in-out;
        will-change: transform;
    }
}